@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.home-container
  background-color: #fff
  overflow: hidden
  .header-container
    width: 90%
    margin: 0 auto
    margin-bottom: 20px
    .banner
      margin-top: 40px
      display: flex
      justify-content: space-around;
      .banner-title
        font-size: 28px
        height: 40px
        line-height: 40px
        @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2)
          font-size: 20px
        .light
          color: $color-theme-d
          font-weight: bold
        .dark
          color: #009fab
          font-weight: bold
    .menu
      display: flex
      justify-content: space-between
      font-size: 20px
      margin-top: 30px
      .to-health-list
        width: 35%
        height: 130px
        background-color: #ffe1a7
        border-radius: 5px
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img
          margin-top: 10px
      .menu-column
        height: 130px
        width: 63%
        display: flex
        flex-direction: column;
        justify-content: space-between;
        .to-expert
          background-color: #d1eccb
          height: 48%
          border-radius: 5px
          display: flex;
          justify-content: space-around;
          align-items: center;
        .to-user
          background-color: #c6e4f8
          border-radius: 5px
          height: 48%
          display: flex;
          justify-content: space-around;
          align-items: center;

  .box
    border-top: 10px solid #f5f5f5
    padding: 5px;
    .box-title-container
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 0 4px
      height: 40px
      line-height: 40px
      border-1px(#ccc)
      .icon
        margin-right: 4px
      .box-title
        font-size: 18px
        max-width: 300px
        no-wrap()
      .box-more
        font-size: 12px
        color: #ccc
  .news-list
    .news-item
      padding: 10px
      border-bottom: 1px solid #ccc
      height: 60px
      position: relative;
      img
        float: right;
        margin-left: 5px
        object-fit: cover;
      .news-title
        height: 40px
        line-height: 20px
        font-size: 16px
        line-no-wrap(2)
      .news-time
        position: absolute;
        bottom: 10px
        font-size: 12px
        color: #666


  .expert
    .expert-detail-container
      width: 100%
      display: flex;
      flex-direction: column;
      align-items: center;
      img
        object-fit: cover;
      .expert-avatar
        margin-top: 20px
        border-radius: 50%;
      .expert-name-container
        margin-top: 18px
        .expert-name
          font-size: 16px
          margin-right: 8px
        .expert-major
          font-size: 12px
      .expert-detail
        margin: 18px 0
        padding: 0 8px
        font-size: 16px
        color: #666
        line-height: 25px
        line-no-wrap(4)
  .center
    .center-detail-container
      display: flex;
      flex-direction: column;
      align-items: center;
      .center-name
        margin-top: 18px
        font-size: 18px
      .center-detail
        margin: 18px 0
        padding: 0 8px
        font-size: 14px
        color: #666
        line-height: 25px
        line-no-wrap(4)
  .address
    .address-map
      width: 100%
      height: 200px
